<template>
  <view class="info-container">
    <view class="part-info">
      <view class="info-box">
        <img style="width: 96rpx; height: 96rpx;border-radius: 50%;" src="" alt="" />
        <view class="name">{{ form.name }}</view>
      </view>
      <!-- <u-line style="width: 89%;margin: auto;margin-top: 20rpx;" border-style="solid" hair-line="false"	 color="grey" /> -->
      <button size="mini"  @tap="edit" type="primary" class="btn">基本信息填写</button>
    </view>
    <view class="part-normal">
      <view class="title-box">
        <view class="icon"> </view> <view class="title">基本信息</view></view
      >
      <view class="item-box">
        <view class="item-title">身高</view>
        <view class="item-text">{{ form.height + 'CM' }}</view>
      </view>
      <view class="item-box">
        <view class="item-title">体重</view>
        <view class="item-text">{{ form.weight + 'KG' }}</view>
      </view>
      <view class="item-box">
        <view class="item-title">血型</view>
        <view class="item-text">{{ form.blood + '型' }}</view>
      </view>
    </view>
    <view class="part-normal">
      <view class="title-box">
        <view class="icon"> </view> <view class="title">病史</view></view
      >
      <view class="item-box">
        <view class="item-title">既往病史</view>
        <view class="item-text">{{ '无' }}</view>
      </view>
      <view class="item-box">
        <view class="item-title">过敏源</view>
        <view class="item-text">{{ '无' }}</view>
      </view>
    </view>
    <view class="part-normal">
      <view class="title-box">
        <view class="icon"> </view> <view class="title">病史</view></view
      >
      <view class="item-box">
        <view class="item-title">姓名</view>
        <view class="item-text">{{ '张三' }}</view>
      </view>
      <view class="item-box">
        <view class="item-title">紧急联系人</view>
        <view class="item-text">{{ '13729888888' }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue'
let form = ref({
  name: '张龙',
  phone: '',
  height: '170',
  weight: '50',
  blood: 'A',
  desc: ''
})

//取消
let cancel = () => {
  uni.navigateBack()
}
let edit =()=>{
    uni.navigateTo({ url: '/pages/me/components/personaledit' })
}
</script>

<style scoped>
.title-box {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
  padding-top: 20rpx;
  margin-left: 18rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 48rpx;
  color: rgba(17, 24, 39, 1);
  text-align: left;
  margin-left: 8rpx;
}
.info-container {
  background-color: rgb(244, 244, 244);
}
.icon {
  left: 9px;
  top: 5px;
  width: 3px;
  height: 14px;
  opacity: 1;
  border-radius: 1px;
  background: rgba(59, 130, 246, 1);
  display: flex;
}
.part-info{
      border-radius: 15rpx;

  margin: auto;
  text-align: center;
  background-color: #fff;
  padding-bottom: 20rpx;
}
.part-normal {
  border-radius: 15rpx;
  width: 90%;
  margin: auto;
  background-color: #fff;
  padding-bottom: 20rpx;
}
.item-box {
  margin-left: 32rpx;
  margin-top: 24rpx;
}
.item-title {
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 32rpx;
  color: rgba(107, 114, 128, 1);
  text-align: left;
}
.item-text {
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0.7px;
  line-height: 40rpx;
  color: rgba(17, 24, 39, 1);
  text-align: left;
}
.info-box {
    display: flex;
    align-items: center;
    padding: 40rpx;
    padding-bottom: 0rpx;
}
.name{
margin-left: 24rpx;
}
.btn{ 
    text-align: center;
    margin: auto;
    margin-top: 20rpx;
    width: 90%;

}
</style>
